<template>
    <!-- 
        知识点： 
                1、在vue3的setup函数中，如何获取 路由器router -- 也就是vue2中的 this.$router？
                        用到了 api : useRouter
                        import { useRouter} from 'vue-router'
                2、获得userRouter之后，可以进行哪些操作？
                    编程时路由导航、路由守卫
                3、vue3中编程式路由导航的用法：
                    (1)在template模板中使用的话，和vue2是一样的，是直接使用。
                            <button @click="$router.push({name:'login'})">点击到登陆页面</button>
                    (2)在setup函数中,通过api--useRouter实现
                            <button @click="goHome">点击跳转到首页</button>
                            const router = useRouter();//获得路由器
                            const goHome = ()=>{
                                router.push({
                                    name:'home'
                                })
                            }
                4、vue3中路由守卫的用法：
                        (1)路由守卫分为 全局守卫、组件守卫、独享守卫；
                        (2)全局守卫：
                                vue2与vue3用法一直
                                在路由器模块中设置，对所有的路由都有效。
                                全局前置守卫： router.beforeEach((to,from,next)=>{})
                                全局后置守卫： router.afterEach((to,from)=>{})
                        (3)组件守卫：
                                只针对当前组件的路由跳转。
                                boforeRouterEnter()
                                beforeRouterUpdate()
                                beforeRouterLeave()

                                在vue3中：
                                    boforeRouterEnter在setup函数中不能用，只能设在setup函数外面；
                                    beforeRouteLeave 在setup函数中，可以使用。
                                        import { onBeforeRouteLeave} from 'vue-router'
                                        onBeforeRouteLeave(()=>{
                                            console.log('离开后')
                                        })
                                    beforeRouteUpdate  可用，很鸡肋。
                        (4)路由独享守卫：
                                写在对应的单个路由中；
                                beforeEnter：(to,from,next)=>{}
    -->
    <div>
        <h1>商品-二级路由组件</h1>
        <button @click="$router.push({name:'login'})">点击到登陆页面</button><br>
        <button @click="goHome">点击跳转到首页</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute,useRouter,onBeforeRouteLeave} from 'vue-router'
export default defineComponent({
    setup () {
        //当前路由信息
        let route = useRoute();
        console.log(route)//proxy 对象
        console.log(route.params)//{id: '02'}
        console.log(route.params.id)//02
        //router    this.$router
        const router = useRouter();
        console.log(router)

        const goHome = ()=>{
            router.push({
                name:'home'
            })
        }

        onBeforeRouteLeave(()=>{
            console.log('离开后')
        })
        return {
            goHome
        }
    }
})
</script>

<style scoped>

</style>